<template>
  <!-- 企业信息 -->
  <view>
    <view style="margin-bottom: 100rpx;">
      <view v-if="!!dataList && dataList.length > 0">
        <checkbox-group @change="checkboxChange">
          <uni-card title="" :is-shadow="false" v-for="(item,index) in dataList" :key="index"
                    @click="handleDetail(item)">
            <view class="flex_item">
              <p class="grid-integral">企业名称：{{ item.companyName }}
                <companyGreen v-if="item.companyIsCertify == 1" class="certiyImg"/>
                <companyGray v-if="item.companyIsCertify == 0" class="certiyImg"/>
              </p>

              <checkbox @click.stop style="transform:scale(0.7)" color="#00a660" :value="item.id.toString()"
                        :checked="item.checked"/>
            </view>
            <p class="grid-integral">员工姓名：{{ item.name }}
              <personalGreen v-if="item.isCertify == 1" class="certiyImg"/>
              <personalGray v-if="item.isCertify == 0" class="certiyImg"/>
            </p>
            <p class="grid-integral">员工手机号：{{ item.mobile }}</p>
            <p class="grid-integral">员工邮箱：
              <span v-if="item.email != null">{{ item.email }}</span>
              <span v-else>--</span></p>
            <p class="grid-integral">客户类别：
              <template v-for="(dictItem, index) in dicts.ec_customer_type">
                <template v-if="item.customerType == dictItem.value">
                  <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
                </template>
              </template>
            </p>
            <view slot="actions" class="card-actions" style="padding: 0 20rpx;">
              <view @click.stop>黑名单：
                <switch
                    v-if="item.companyStatus == 1"
                    color="red"
                    style="transform:scale(0.6)"
                    :checked="item.status == 1 ? true : false"
                    @change="switchChange(item)"
                    disabled/>
                <span v-else @click.stop="switchChange(item)">
            <switch color="red" style="transform:scale(0.6)" :checked="item.status == 1 ? true : false" disabled/>
          </span>
              </view>
              <view class="flex_between">
                <view class="card-actions-item" @click.stop="handleUpdate(item)">
                  <text class="card-actions-item-text themeColor">修改</text>
                </view>
                <view class="card-actions-item" @click.stop="handleDelete(item,index)" style="margin-right: 0;">
                  <text class="card-actions-item-text errorColor">删除</text>
                </view>
              </view>
            </view>
          </uni-card>
        </checkbox-group>
        <!-- 加载更多 -->
        <uni-load-more color="#00a660" :status="loadStatus"/>
      </view>
      <!-- 暂无数据 -->
      <luanqingEmpty :show="true" text="没有更多数据啦" v-else/>
    </view>
    <!-- 底部全选/合并开票 -->
    <view class="foot-menu flex_between">
      <checkbox-group @change="checkboxAllChange">
        <label>
          <checkbox
              style="transform:scale(0.7)"
              color="#00a660"
              :checked="allFlag.checked"
              :value="allFlag.cb"/>
          全选
        </label>
      </checkbox-group>
      <view>
        <button size="mini" class="red_btn" :disabled="multiple" @click="handleDelete()">批量删除</button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  changeStatus,
  delCustomerCompanyStaff,
  listCustomerCompanyStaffPerson
} from "@/api/ec/person/customer/customerCompanyStaff";
import companyGray from "@/components/svg/companyGray"
import companyGreen from "@/components/svg/companyGreen"
import personalGray from "@/components/svg/personalGray"
import personalGreen from "@/components/svg/personalGreen"
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {getDictsByNameForUni} from "@/utils/dicts";

export default {
  name: "customerPerson",
  components: {luanqingEmpty, companyGray, personalGray, personalGreen, companyGreen,},
  props: {
    // 查询参数
    findApi: {
      type: String,
    },
  },
  data() {
    return {
      // 数据字典
      dicts: {
        ec_customer_type: [],
      },
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {
          findApi: undefined
        }
      },
      // 全选框
      allFlag: {
        value: 'cb',
        checked: false
      },
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
    }
  },
  beforeDestroy() {
    this.unbindingRefreshData();
  },
  created() {
    this.bindingRefreshData();
    this.getDicts();
  },
  methods: {
    // ===============================================================================================================
    // ==== 加载数据字典
    // ===============================================================================================================
    /**加载数据字典*/
    getDicts() {
      this.dicts.ec_customer_type = getDictsByNameForUni("ec_customer_type");
    },
    /** 绑定 */
    bindingRefreshData() {
      // 刷新页面数据
      uni.$on('refreshCustomerCompanyStaff', () => {
        this.handleQuery();
      });
    },
    /** 解除绑定 */
    unbindingRefreshData() {
      uni.$off('refreshCustomerCompanyStaff');
    },
    // ===============================================================================================================
    // ==== 复选框选择
    // ===============================================================================================================
    /** 全选复选框的checkbox-group  changge事件 */
    checkboxAllChange(e) {
      // 选中的选项数据
      let selection = [];
      // 取消全选
      if (e.detail.value.length == 0) {
        this.dataList.map(item => this.$set(item, 'checked', false));
        this.$set(this.allFlag, 'checked', false);
        selection = [];
      } else {
        // 全选
        this.dataList.map(item => {
          this.$set(item, 'checked', true);
          selection.push(item);
        });
        this.$set(this.allFlag, 'checked', true);
      }
      this.handleSelectionChange(selection);
    },
    /** 复选框组合的checkbox-group  changge事件*/
    checkboxChange(e) {
      let items = this.dataList;
      let values = e.detail.value;
      for (let i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i];
        if (values.includes(item.id.toString())) {
          this.$set(item, 'checked', true);
        } else {
          this.$set(item, 'checked', false);
        }
      }
      // 是否全部勾选，判断全选与否状态
      let offCarArr = [];
      this.dataList.forEach(item => offCarArr.push(item));
      let allChecks = offCarArr.every(item => item.checked == true);
      allChecks ? this.$set(this.allFlag, 'checked', true) : this.$set(this.allFlag, 'checked', false);

      // 选中的选项数据
      let selection = [];
      this.dataList.forEach(item => (item.checked) ? selection.push(item) : '');
      this.handleSelectionChange(selection);
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.multiple = !selection.length;
    },
    // ===============================================================================================================
    // ==== 数据列表
    // ===============================================================================================================
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询印章变更记录列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      this.queryParams.params.findApi = this.findApi;
      listCustomerCompanyStaffPerson(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 上拉刷新回调 */
    loadMore() {
      if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
        this.loadStatus = 'loading';
        // 延迟500毫秒显示loading效果
        setTimeout(() => {
          // 执行查询的方法
          this.getList(false);
        }, 500)
      } else {
        // 停止加载
        this.loadStatus = 'noMore'
      }
    },
    /** 查看详情 */
    handleDetail(item) {
      uni.navigateTo({url: './modifyCompanyStaff?dataDetails=' + JSON.stringify(item) + '&type=1'});
    },
    /** 新增按钮操作 */
    handleAdd() {
      uni.navigateTo({url: './modifyCompanyStaff?type=0'});
    },
    /** 修改按钮操作 */
    handleUpdate(item) {
      uni.navigateTo({url: './modifyCompanyStaff?dataDetails=' + JSON.stringify(item) + '&type=' + 0});
    },
    /** 删除按钮操作 */
    handleDelete(item, index) {
      let that = this
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '确定要删除该企业客户吗？ 删除后数据不可恢复，是否确定删除？',
        success: function (res) {
          if (res.confirm) {
            const ids = (!!item) ? item.id : that.ids;
            delCustomerCompanyStaff(ids).then(() => {
              that.handleQuery();
              that.$modal.msgSuccess("删除成功");
            });
          }
        },
      })
    },
    /** 黑名单 */
    switchChange(item) {
      let text = item.status == 1 ? "移除" : "加入";
      let that = this
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '确认将该联系人 " ' + text + ' " 黑名单吗？',
        success: res=> {
          if (res.confirm) {
            let statusEx = item.status == 1 ? 0 : 1;
            const param = {id: item.id, status: statusEx}
            changeStatus(param).then(response => {
              that.getList(true)
              this.$modal.msg(text + '黑名单成功')
            })
          } else if (res.cancel) {
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-card .uni-card__content {
  padding-bottom: 0 !important;
}

.flex_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.certiyImg {
  width: 30rpx;
  height: 30rpx;
  margin-left: 6rpx;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 8rpx;
}

.foot-menu {
  width: 100%;
  height: 100rpx;
  background: #fff;
  position: fixed;
  padding: 0 25rpx;
  bottom: 0; /**距离底部为0*/
  left: 0;
  z-index: 1;
  border-top: 2rpx #ebeef5 solid;
  display: flex;
}
</style>
